<template>
    <div class="me">
        <Tip :tipsText="tips.text" v-show="tips.isTips"/>
        <Top text="个人信息"/>
        <div class="table">
            <Input 
                text="用户名：" 
                type="text" 
                placeholder='请输入用户名'
                :value="userInfo.username"
                @getInfo="(username) => (this.username = username)"
            />
            <Input 
                text="性别：" 
                type="text" 
                placeholder='请输入性别'
                :value="userInfo.sex"
                @getInfo="(sex) => (this.sex = sex)"
            />
            <Input 
                text="生日：" 
                type="date" 
                placeholder='请输入性别'
                :value="userInfo.birthday"
                @getInfo="(birthday) => (this.birthday = birthday)"                
            />
            <Input 
                text="年龄：" 
                type="text" 
                placeholder='请输入年龄'
                :value="userInfo.age"
                @getInfo="(age) => (this.age = age)"
            />
            <Input 
                text="个性签名：" 
                type="text" 
                placeholder='请输入个性签名'
                :value="userInfo.introduce"
                @getInfo="(introduce) => (this.introduce = introduce)"
            />
        </div>
        <SubmitBtn text="确定修改" @click.native="updateUserInfo()"/>
    </div>
</template>

<script>
    import SubmitBtn from '@/views/Location/SubmitBtn'
    import Input from '@/views/Location/Input'
    import {mapState} from 'vuex'
    export default {
        name:"Me-View",
        components:{Input, SubmitBtn},
        data(){
            return {
                username:"",
                sex:"",
                birthday:'',
                age:0,
                introduce:""
            }
        },
        computed:{
            ...mapState('About',['userInfo','tips'])
        },
        methods: {
            // 获取用户信息
            getUserInfo(){
                this.$store.dispatch('About/getUserInfo')
            },
            updateUserInfo(){
                const info = {
                    username : this.username || this.userInfo.username,
                    sex : this.sex || this.userInfo.sex, 
                    birthday : this.birthday || this.userInfo.birthday,
                    age : this.age || this.userInfo.age,
                    introduce : this.introduce || this.userInfo.introduce
                }
                this.$store.dispatch('About/updateUserInfo',info)
                this.getUserInfo()
            }
        },
        mounted() {
            this.getUserInfo()
        },
    }
</script>

<style scoped lang="less">
    .table{
        padding: 15px 0 20px 0;
    }
</style>